<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="3">
                                    <h5>快件结算</h5>
                                </el-col>
                                <el-col :span="6" :offset="12">
                                    <div class="block">
                                        <el-date-picker
                                            size="medium"
                                            v-model="queryParams.date"
                                            align="right"
                                            type="month"
                                            value-format="yyyy-MM"
                                            placeholder="选择日期"
                                        >
                                        </el-date-picker>
                                    </div>
                                </el-col>
                                <el-col :span="3">
                                    <el-button size="medium" type="warning" style="background: rgba(248,154,55,1);" @click="queryList">查询</el-button>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24" :xs="24" :sm="24" :lg="24">
                <div class="grid-content bg-purple">
                    <div class="panel">
                        <div class="panel-body">
                            <el-row :gutter="20">
                                <el-col :span="24" :xs="24" :sm="24" :lg="24">
                                    <el-row :gutter="20" v-loading="listLoading">
                                        <el-col :span="12" v-for="(v,k) in listData.data" :key="k" >
                                            <el-card class="box-card">
                                                <div slot="header" class="clearfix">
                                                    <el-row type="flex"  justify="space-between" :gutter="20">
                                                        <el-col :span="10"><h5 class="whiteFont">{{v.start_time}} —— {{v.end_time}}</h5></el-col>
                                                        <el-col :span="4"><h5 class="whiteFont" style="text-align: center">{{status[v.status]}}</h5></el-col>
                                                    </el-row>
                                                </div>
                                                <div class="text item">
                                                    <el-table
                                                        :data="v.bill"
                                                        border
                                                        height="600"
                                                        :summary-method="getSummaries"
                                                        show-summary
                                                        style="width: 100%; margin-top: 20px" @row-click="openDetail">
                                                        <el-table-column
                                                            prop="date"
                                                            label="时间"
                                                            width="180">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="total_sign"
                                                            label="签收件（件）">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="total_income"
                                                            label="收入（元）">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="charge"
                                                            label="手续费（件/元）">
                                                        </el-table-column>
                                                        <el-table-column
                                                            prop="total"
                                                            label="合计（元）">
                                                        </el-table-column>
                                                    </el-table>
                                                </div>
                                            </el-card>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="detailDialog" width="35%" :before-close="handleDetailClose">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <el-row type="flex"  justify="space-between" :gutter="20">
                        <el-col :span="10"><h5 class="whiteFont">{{detailQueryParams.date}}</h5></el-col>
                    </el-row>
                </div>
                <div class="text item">
                    <el-table
                        :data="detailData.data"
                        style="width: 100%;" >
                        <el-table-column
                            prop="network_name"
                            label="网点"
                            width="180">
                        </el-table-column>
                        <el-table-column
                            prop="total_sign"
                            label="签收件（件）">
                        </el-table-column>
                        <el-table-column
                            prop="unit_price"
                            label="单价（元）">
                        </el-table-column>
                        <el-table-column
                            prop="total_income"
                            label="应付（元）">
                        </el-table-column>
                    </el-table>
                </div>
                <br>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="detailQueryParams.page"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="detailQueryParams.paginate"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="detailData.total">
                </el-pagination>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    import api from '../apis'
    export default {
        name: "Balance",
        data(){
            return {
                //详情对话框开关
                detailDialog:false,
                //列表加载动画
                listLoading:false,
                //列表请求参数
                queryParams:{
                    date:'',
                },
                //列表数据
                listData:{
                    data:[],
                    total:0,
                },
                //结算状态
                status:[
                    '未结算',
                    '已结算'
                ],
                //详情数据
                detailData:{
                    data:[],
                    total:0,
                },
                detailQueryParams:{
                    id:1,
                    page:1,
                    paginate:5,
                    date:'',
                }
            }
        },
        methods:{
            /**
             * 请求列表
             */
            queryList(){
                this.listLoading = true;
                api.balance.fetch(this.queryParams).then(response=>{
                    this.listData =  response.data;
                    this.listLoading = false;
                }).catch(errors=>{
                    this.$message.error('请求失败');
                })
            },
            /**
             * 表格合计方法
             * @param param
             * @returns {Array}
             */
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr,index) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return (prev*100 + curr*100)/100;
                            } else {
                                return prev;
                            }
                        }, 0);
                        if(index==1){
                            sums[index] += ' 件';
                        }else if(index==3){
                            sums[index] += ' 件/元';
                        }else{
                            sums[index] += ' 元';
                        }
                    } else {
                        sums[index] = 'N/A';
                    }
                    if (index === 3) {
                        sums[index] = 'N/A';
                    }
                });

                return sums;
            },
            /**
             * 点击表格行
             * @param row
             * @param event
             * @param column
             */
            openDetail(row,event,column){
                this.detailQueryParams.date = row.date;
                this.detailDialog = true;
                this.queryDetail();
            },
            /**
             * 请求详情数据
             */
            queryDetail(){
                api.balance.detail(this.detailQueryParams).then(response=>{
                    this.detailData = response.data;
                }).catch(errors=>{

                })
            },
            /**
             * 关闭详情对话框
             */
            handleDetailClose(){
                this.detailDialog = false;
            },
            /**
             * 改变详情列表分页容量
             */
            handleSizeChange(size){
                this.detailQueryParams.paginate = size;
                this.queryDetail();
            },
            /**
             * 改变详情列表分页页码
             */
            handleCurrentChange(page){
                this.detailQueryParams.page = page;
                this.queryDetail();
            }
        },
        mounted(){
            this.queryList();
        },
    }
</script>

<style lang="scss" scoped>
    .el-date-editor.el-input, .el-date-editor.el-input__inner{
        width: 100%;
    }
    .detail-title{
        border-left: rgba(248,154,55,1) 2px solid;
        padding-left: 5px;
        font-size: 18px;
    }
    .box-card{
        margin-top: 20px;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>
